<template>
  <div class="customer-info">
    <div>
      <span class="name">{{ row.customerName }}</span>
      <span class="owner" v-if="row.owner">归属：{{ owner }}</span>
    </div>
    <div class="btns">
      <!-- 管理工作台隐藏打电话 -->
      <!-- <Phone :data="row" /> -->
      <Distribute :customerId="row._id" @onUpdateOwner="updateOwner" />
      <Follow :customerId="row._id" @onUpdateDy="updateDy" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import Distribute from '@app/customer/components/distribute/dialog-distribute.vue'
import Follow from '@app/customer/components/follow.vue'
import { commonStore } from '@/common/store/modules/common'

export default defineComponent({
  name: 'CustomerInfo',
  components: { Follow, Distribute },
  props: {
    row: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['onUpdateDy', 'onUpdateOwner'],
  setup(props, { emit }) {
    const updateDy = () => {
      emit('onUpdateDy')
    }

    const owner = computed(() => {
      const agentsObj: any = commonStore().publicCache.userCacheObj || {}
      const ownerObj = agentsObj[props.row.owner]
      if (ownerObj) {
        return ownerObj.agentName + '[' + ownerObj.agentNumber + ']'
      }
      return ''
    })

    const updateOwner = (owner: string) => {
      emit('onUpdateOwner', owner)
    }

    return { updateDy, owner, updateOwner }
  }
})
</script>

<style lang="stylus">
.customer-info
  background: var(--mc-gray1-color)
  border-radius: 4px
  height: 68px
  padding 20px
  box-sizing: border-box
  display flex
  align-items: center
  justify-content: space-between
  .name
    font-weight: 500
    font-size: 20px
    color: rgba(0, 0, 0, 0.88)
  .owner
    font-size: 14px
    color: rgba(0, 0, 0, 0.6)
    margin-left 8px
  .btns
    display flex
    align-items: center
</style>
